<!--  -->
<template>
  <el-collapse v-model="activeNames" accordion>
    <el-collapse-item :title="ruleData.name" name="1">
      <el-tag
        v-for="tag in ruleData.tags"
        :key="tag.name"
        closable
        :type="tag.type"
        @close="handleClose(tag)"
      >
        {{ tag.name }}
      </el-tag>
      <el-select v-model="addList" multiple placeholder="新增" style="width:100px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value + '#' + item.label"
        >
        </el-option>
      </el-select>
      <el-button type="success" id="checkGrp" @click="addLabel"
        >增加标签</el-button
      >
      <el-button type="success" id="checkGrp" @click="confirmChange"
        >确认修改</el-button
      >
      <el-button type="success" id="checkGrp" @click="showGrp"
        >查看群体分析</el-button
      >
      <el-button type="danger" id="checkGrp" @click="deleteRule">
        删除规则
      </el-button>
    </el-collapse-item>

    <el-dialog title="群体分析" :visible.sync="dialogGroupVisible">
      <groupAnalyze :label_ids="label_ids"></groupAnalyze>
    </el-dialog>
  </el-collapse>
</template>

<script>
import GroupAnalyze from "../Profile/GroupAnalyze";
export default {

  data() {
    return {
      activeNames: ["1"],
      options: [],
      addList: [],
      label_ids: [],
      dialogGroupVisible: false,
    };
  },

  methods: {
    addLabel() {
      console.log("add a label");
      var i=0,len=this.addList.length;
      for ( ;i<len; i++) {
        var tmpList = this.addList[i].split('#');
        var name = tmpList[1];
        var id = tmpList[0];
        console.log(this.ruleData.tags);
        this.ruleData.tags.push({"id": id, "name": name,});
      }
    },

    handleClose(tag) {
        this.ruleData.tags.splice(this.ruleData.tags.indexOf(tag), 1);
    },

    showGrp() {
      console.log("show a grp");
      var i=0,len = this.ruleData.tags.length;
      for(;i<len;i++){
        this.label_ids.push(this.ruleData.tags[i]["id"])
      }
      console.log(this.label_ids);
      this.dialogGroupVisible = true;
    },

    confirmChange() {
      console.log("confirm change");
      console.log(this.ruleData);
      this.$axios({
        url: "http://"+this.$config.server_ip+":5004/change_rule",
        method: "get",
        params: { data: this.ruleData,}
      }).then((res) => {
        console.log(res.data);
      });
    },

    deleteRule() {
      console.log("delete rule");
      this.$axios({
        url: "http://"+this.$config.server_ip+":5004/delete_rule",
        method: "get",
        params: { data: this.ruleData,}
      }).then((res) => {
        console.log(res.data);
        this.$emit('innerDelete', this.number);
      });
    }
  },

  props: ["ruleData", "topic", "number"],
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$axios({
        url: "http://"+this.$config.server_ip+":5002/get_tags",
        method: "get",
        params: { topic: this.topic},
      }).then((res) => {
        console.log(res.data);
        this.options = res.data;
      });
      console.log(this.options);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  components :{ 
    "groupAnalyze": GroupAnalyze,
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.el-tag {
  margin-left: 5px;
}

#checkGrp {
  margin-left: 10px;
}

.el-dialog {
  width: 300px;
}
</style>